<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title">label标签组件</view>
		</view>
		<view class="smart-padding-wrap">
			<view class="item">
				<view class="item-title">表单组件在label内</view>
				<checkbox-group @change="checkboxChange">
					<label class="list" v-for="item in checkboxItems" :key="item.name">
						<view>
							<checkbox :value="item.name" :checked="item.checked"></checkbox>
							{{item.value}}
						</view>
					</label>
				</checkbox-group>
			</view>

			<view class="item">
				<view class="item-title">label用for标识表单组件</view>
				<radio-group @change="radioChange">
					<view class="list" v-for="(item,index) in radioItems" :key="index">
						<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
						<label class="list-text" :for="item.name">
							{{item.value}}
						</label>
					</view>
				</radio-group>
			</view>

			<view class="item">
				<view class="item-title">label内有多个时选中第一个</view>
				<checkbox-group @change="checkboxChange">
					<label class="list-multi">
						<view class="list-item">
							<checkbox class="checkbox-special">选项一</checkbox>
						</view>
						<view class="list-item">
							<checkbox class="checkbox-special">选项二</checkbox>
						</view>
						<view class="note">点击该label下的文字默认选中第一个checkbox</view>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxItems: [{
						name: 'USA',
						value: '美国'
					},
					{
						name: 'CHN',
						value: '中国',
						checked: 'true'
					}
				],
				radioItems: [{
						name: 'USA',
						value: '美国'
					},
					{
						name: 'CHN',
						value: '中国',
						checked: 'true'
					}
				]
			}
		},
		methods: {
			checkboxChange: function(e) {
				var checked = e.detail.value
				console.log(checked)
			},
			radioChange: function(e) {
				var checked = e.detail.value
				console.log(checked)
			}
		}
	}
</script>

<style>
.item{
	margin-bottom: 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 1px solid #f5f5f5;
}

.item:last-child{
	border-bottom: none;
}

.item-title{
	margin-bottom: 15rpx;
	font-weight: bold;
}

.list{
	display: block;
	justify-content: flex-start;
	padding: 22rpx 0;
}

.list view{
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.list-text{
	margin-left: 10rpx;
}

.list-multi{
	display: block;
}

.list-item{
	padding: 22rpx 0;
}

.checkbox-special{
	margin-right: 10rpx;
}

.note{
	margin-top: 20rpx;
	color: #666;
	font-size: 26rpx;
}
</style>
    